<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
	<title>家族圈管理</title>
	     	<link rel="stylesheet" href="${ctx}/static/uploadify/uploadify.css" />
	    <script src="${ctx}/static/uploadify/jquery.uploadify.min.js" type="text/javascript"></script>
	<style type="text/css">
		#previewImgs{
	        width:350px;
	        height:300px;
	        list-style:none;
        }
        #previewImgs li{
	         max-width:350px;
	         height:auto;
	         float:left;
	         margin:3px;
         }
	</style>
</head>

<body>

	<div class="main-content-inner">
		<div class="breadcrumbs" id="breadcrumbs">
			<script type="text/javascript">
				try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
			</script>
			<ul class="breadcrumb">
				<li>
					<i class="ace-icon fa fa-home home-icon"></i>
					<a href="${ctx}/welcome">主页</a>
				</li>
				<li class="active">家族圈</li>
			</ul>
		</div>	
		
		<div class="page-content">
			
			<c:if test="${not empty message}">
				<div id="message" class="alert alert-success"><button data-dismiss="alert" class="close">×</button>${message}</div>
			</c:if>	
			
			<div class="page-header">
				<h1>
					聊天
					<small>
						<i class="ace-icon fa fa-angle-double-right"></i>
						<c:if test="${action eq 'create'}">发布</c:if>
						<c:if test="${action eq 'update'}">修改</c:if>信息
					</small>
				</h1>
			</div>		
			
			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
					<div class="row">
						<div class="col-xs-12">

							<form id="inputForm" action="${ctx}/feed/${action}" method="post" class="form-horizontal">
								<input type="hidden" name="id" id="id" value="${feedtag.id}"/>
								<input type="hidden" name="op" id="op" value="${action}"/>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 发布用户: </label>
									<div class="col-sm-9">
										<input  type="text" class="col-xs-10 col-sm-2 required"  maxlength="11" autocomplete="off" id="loginName"  name="loginName"  value="${feedtag.name}" placeholder="用户注册账号"/>
									</div>
								</div>
								
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="form-field-1">标签选项: </label>
									<div class="col-sm-4">
			 							<select class="form-control required" id="zsadmin" name="tag"  >
											<option value="" ></option>
											<c:forEach items="${feedtags}" var="feedtag">
												<option value="${feedtag.id}" <c:if test="${feedtag.id == feed.feedTag.id}">selected="selected"</c:if> >${feedtag.name}</option>
											</c:forEach>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="form-field-1">文字内容: </label>
									<div class="col-sm-9">
										<textarea id="content" name="content" maxlength="300"  class="col-xs-10 col-sm-5 smallArea" cols="25" rows="5" placeholder="300字以内">${feed.content}</textarea>
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="form-field-1">照片内容: </label>
									<div class="col-sm-2">
										<input id="upload_pact_file" name="upload_pact_file" type="file" class="wjyy" />
									</div>
									<div class="col-sm-3">
										<label id="uplodecount">0</label>/<label>9</label>
									</div>
				
								</div>
										<div class="preview" style="margin-left:200px">
											<input id="pics" name="pics" type="hidden"> 
											<ul id="previewImgs"></ul>
										</div>
								<div class="clearfix form-actions">
									<div class="col-md-offset-3 col-md-9">
										<button id="submit_btn" class="btn btn-info" type="submit">
											<i class="ace-icon fa fa-check bigger-110"></i>
											提交
										</button>

										&nbsp; &nbsp; &nbsp;
										<button id="cancel_btn" class="btn" type="reset" onclick="history.back()">
											<i class="ace-icon fa fa-undo bigger-110"></i>
											返回
										</button>
									</div>
							  </div>
							</form>
							<!-- 作为上传进度条的容器 -->
							<div id="some_file_queue"></div>
						</div>
					</div>			
				</div>
			</div>
			
		</div>
	</div>

	<script src="${ctx}/static/js/jquery.validate.min.js"></script>
	<script src="${ctx}/static/js/messages_bs_zh.js"></script>

	<script>
		$(document).ready(function() {
			$("#title").focus();
			$("#inputForm").validate({
				rules:{
					loginName:{
						rangelength:[11,11],
						remote:"${ctx}/user/checkuserlogin?userId=" + $("#id").val()
					},
					tag:{
						required:true
					},
					content:{
						required:true
					}
				},
				messages: {
					loginName:{
						rangelength:'发布用户为11位的手机号',
						remote:'该用户不存在'
					}
				}
			});
		});
// 		<li><img alt="预览图片" width="150" height="150"></li>
		/*合同文件**/
		$('#upload_pact_file').uploadify({
		 	'queueID'  : 'some_file_queue',
			'buttonText' : '上传图片', 
			'swf'      : '${ctx}/static/uploadify/uploadify.swf',
			'uploader' : '${ctx}/ajax/imageView2?type=3&id=1', 
			'fileSizeLimit':'5MB', 
			'fileObjName'   : 'file',  
			'fileTypeExts'  : '*.jpg;*.jpeg;*.gif;*.png',
			'fileDesc': '请选择png,jpg,jpeg,gif等文件格式',
			'removeCompleted'	: false,
			'width' : 100, 
            'removeCompleted':false,
			'buttonClass'	: "btn btn-info",
		    'onUploadSuccess' : function(file, data, response) {  
		        console.log(data);
		        if(data!="" && $("#previewImgs li").length <9 ){					
					var imgstr = '<li><img src="'+data+'" width="80" height="70"><a onclick=goDel(this,"'+data+'")>删除</a></li>';
					$("#previewImgs").append(imgstr);
					document.getElementById("pics").value=$("#pics").val()+data+"|";
					var count=document.getElementById("uplodecount").innerHTML;
					document.getElementById("uplodecount").innerHTML= Number(count)+ Number(1);
				}
		        if($("#previewImgs li").length >= 9){
		        	alert("上传照片已有9张，不能再次上传");
			        $('#upload_pact_file').uploadify('disable', true);		        	
		        }
		    } ,
		    'onCancel':function(file){
		    	alert("取消上传");
		    },
		    'onInit': function () {
		        $("#file_upload-queue").hide();
		    }
		}); 
		
		// ajax 删除预览列表中的一张图片
		function goDel(objdom,src){
			//先执行ajax删除图片，删除成功之后 删除预览图片
			//alert(src);
			$(objdom).parent().remove();
			//删除预览图片之后还要 修改 id="saveurl" 隐藏域的值，这个是写入到数据库的图片路径（我这里只是写一个测试就没有完善见谅了）
			var saveurl =document.getElementById("pics").value;
			var bool =saveurl.indexOf(src+"|");
			if(bool){  //包含这个字符串，就删掉
				saveurl =saveurl.replace(src+"|","");  //替换掉这个字符串
			}
			document.getElementById("pics").value=saveurl; //更新隐藏域
			 $('#upload_pact_file').uploadify('disable', false);	
			// 删除时减去相应的数字
				var count=document.getElementById("uplodecount").innerHTML;
				document.getElementById("uplodecount").innerHTML= Number(count)- Number(1);
		}
		
	</script>
</body>
</html>
